<!-- 
 统计表 
-->
<template>
  <div class="statistics">
    <div class="nav-bar">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="Summery" name="Summery"></el-tab-pane>
        <el-tab-pane label="Shows Requirement" name="ShowsRequirement"></el-tab-pane>
        <el-tab-pane label="Shows Staffing" name="ShowsStaffing"></el-tab-pane>
        <el-tab-pane label="MOD模型" name="MOD"></el-tab-pane>
        <el-tab-pane label="SUR材质" name="SUR"></el-tab-pane>
        <el-tab-pane label="RIG绑定" name="RIG"></el-tab-pane>
        <el-tab-pane label="ANI动画" name="ANI"></el-tab-pane>
        <el-tab-pane label="EFX特效" name="EFX"></el-tab-pane>
        <el-tab-pane label="LGT灯光" name="LGT"></el-tab-pane>
        <el-tab-pane label="立体" name="ThreeDM"></el-tab-pane>
        <el-tab-pane label="PMD制片" name="PMD"></el-tab-pane>
        <el-tab-pane label="学生" name="STU"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content" ref="tableContainer">
      <el-scrollbar class="scrollbar" :height="scrollbarHeight">
        <component :is="currentComponent" v-bind="{ tableHeight: scrollbarHeight }" />
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import Summery from '../components/Statistics/Summery.vue'
import ShowsRequirement from '../components/Statistics/ShowsRequirement.vue'
import MOD from '../components/Statistics/MOD.vue'
import SUR from '../components/Statistics/SUR.vue'
import RIG from '../components/Statistics/RIG.vue'
import ANI from '../components/Statistics/ANI.vue'
import EFX from '../components/Statistics/EFX.vue'
import LGT from '../components/Statistics/LGT.vue'
import ThreeDM from '../components/Statistics/ThreeDM.vue'
import STU from '../components/Statistics/STU.vue'
import PMD from '../components/Statistics/PMD.vue'

const componentsMap = {
  Summery,
  ShowsRequirement,
  MOD,
  SUR,
  RIG,
  ANI,
  EFX,
  LGT,
  ThreeDM,
  STU,
  PMD,
}
const router = useRouter()
const route = useRoute()
const activeName = ref<string | any>('Summery')
const scrollbarHeight = ref(800)
const tableContainer = ref<HTMLElement | null>(null)

onMounted(() => {
  activeName.value = route.params.id || 'Summery'
  if (tableContainer.value) {
    scrollbarHeight.value = tableContainer.value.offsetHeight // 计算并设置高度
  }
})

const currentComponent = computed(() => componentsMap[activeName.value as keyof typeof componentsMap])
const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.paneName?.toString() || 'Summary'
  router.push({ name: 'Statistics', params: { id: tab.paneName } })
}
</script>
<style lang="scss">
.statistics {
  .table-header-row {
    background-color: #ecf5ff !important;
  }
}
</style>
<style scoped lang="scss">
.statistics {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  .nav-bar {
  }
  .content {
    flex: 1;
    overflow: auto;
    .scrollbar {
      padding-right: 10px;
    }
  }
}
</style>
